<template>
  <div>
    <el-row style="border-radius: 1%; border:2px dashed #42b983; padding: 20px;">
      <el-col :span="16">
        <el-carousel>
          <el-carousel-item><img src="../../assets/img1.jpg" style="width: 100%; height: 300px"></el-carousel-item>
          <el-carousel-item><img src="../../assets/img2.jpg" style="width: 100%; height: 300px"></el-carousel-item>
          <el-carousel-item><img src="../../assets/img3.jpg" style="width: 100%; height: 300px"></el-carousel-item>
        </el-carousel>
      </el-col>
      <el-col :span="8" style="padding-left: 10px">
        <div><el-button type="primary" style="width: 100%; height:67px; margin-bottom:10px" @click="redirectToPost(1)">爱花展示</el-button></div>
        <div><el-button type="primary" style="width: 100%; height:67px; margin-bottom:10px" @click="redirectToPost(3)">疑惑问答</el-button></div>
        <div><el-button type="primary" style="width: 100%; height:67px; margin-bottom:10px" @click="redirectToPost(2)">养花经验</el-button></div>
        <div><el-button type="primary" style="width: 100%; height:67px" @click="redirectToShop">商店</el-button></div>
      </el-col>
    </el-row>
      <el-row :span="24" style="border-radius: 1%; border:2px dashed #42b983; padding-top: 20px; padding-bottom: 20px; margin-top: 20px;">
        <el-row>
          <el-col :span="24">
            <!--查询表单-->
            <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="🌷名字">
                <el-input v-model="searchObj.flowerName" placeholder="花朵的名字" /> 
            </el-form-item>
            <el-form-item label="🍂详情">
                <el-input v-model="searchObj.details" placeholder="花朵的详情" /> 
            </el-form-item>
            <el-form-item label="🌵植物分类">
                <el-select v-model="searchObj.family" placeholder="请选择植物分类">
                    <el-option
                    v-for="family in familyList"
                    :key="family.id"
                    
                    :label="family.familyName"
                    :value="family.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <!--这个单选框↑，使用完v-for要空一行，要不的话会有红色的>，然后下面的代码都加粗了，不知道为什么-->
            <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
            <el-button type="default" @click="resetData()">清空</el-button>
            </el-form>
          </el-col>
        </el-row>
        <el-row>
            <el-col span="6" v-for="item in flowerList" :key="item.id" id="goodsCard">
            <el-card style="margin: 20px; height: 700px;" shadow="hover">
                <img :src="item.pic" class="image">
                <div style="padding: 14px;">
                  <div style="margin-bottom: 10px; font-size: 16px; font-weight: bold; text-align: left;">{{item.flowerName}}</div>
                  <div style="margin-bottom: 2px; text-align: left;">详情信息: {{item.details}}</div>
                  <div style="margin-bottom: 2px; text-align: left;">养护知识: {{item.conserve}}</div>
                  <div style="margin-top: 20px; text-align: left;"><el-tag effect="plain">{{getFamilyById(item.family)}}</el-tag></div>
                </div>
            </el-card>
            </el-col>
        </el-row>

        <!--页码-->
        <el-row style="margin-top: 20px;">
            <el-col :span="24"><el-pagination background layout="prev, pager, next" :page-size="limit" :total="total" :current-page="page" @current-change="changeCurrentPage"></el-pagination></el-col>
        </el-row>
      </el-row>
  </div>
    
</template>

<script>
import HomeFlowerApi from '../../api/home/homeFlower'
import HomeFamilyApi from '../../api/home/homeFamily'

export default {
  data() {
    return {
      flowerList: [],
      familyList: [],
      total: 0, // 总记录数
      page: 1, // 页码
      limit: 4, // 每页记录数
      searchObj: {}, // 查询条件
    }
  },
  methods: {
    redirectToPost(type) {
      this.$router.push({ name: 'post', params: { type } });
    },
    redirectToShop() {
      this.$router.push('/shop');
    },
    resetData() {
        this.searchObj = {}
        this.fetchData()
    },
    changeCurrentPage(page) {
        this.page = page
        this.fetchData()
    },
    getAllFamily() {
      HomeFamilyApi.getAllFamily()
      .then(res => {
          this.familyList = res.data.data
          console.log(this.familyList)
      })
    },
    fetchData() {
    HomeFlowerApi.pageList(this.page, this.limit, this.searchObj)
      .then(res => {
          this.flowerList = res.data.data.records
          this.total = res.data.data.total
          console.log(this.total)
      })
    },
  },
  created() {
    this.getAllFamily(),
    this.fetchData()
  },
  computed: {
  //跟据id获取family
    getFamilyById() {
      return id => {
        const item = this.familyList.find(item => item.id == id)
        return item ? item.familyName : ''
      }
    },
  },
}

</script>

<style scoped>
.image{
    width: 100%;
    height: 324px;
}

.btn {
  widows: 100%;
  height: 100%;
}
</style>
